---
type: tutorial
title: ソーシャルメディアフッターを作成する
description: |-
  「初めてのAstroブログ」チュートリアル -
  ゼロからコンポーネントを作成し、ページに追加する
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';


<PreCheck>
  - フッターコンポーネントを作成する
  - ソーシャルメディアコンポーネントを作成し、propsを渡す
</PreCheck>

ページでAstroコンポーネントを使用したので、次にコンポーネントの中で別のコンポーネントを使用してみましょう！

## フッターコンポーネントを作成する

<Steps>
1. `src/components/Footer.astro`に新しいファイルを作成します。

2. 新しいファイル`Footer.astro`に以下のコードをコピーします。

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>私のプロジェクトについて詳しくは<a href={`https://www.${platform}.com/${username}`}>{platform}</a>をご確認ください！</p>
    </footer>
    ```
</Steps>

### `Footer.astro`をインポートして使用する

<Steps>
1. `index.astro`、`about.astro`、`blog.astro`の各Astroページのフロントマターに以下のインポート文を追加します。

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. 各ページのAstroテンプレートに`<Footer />`コンポーネントを追加します。ページの一番下にフッターを表示するために、`</body>`閉じタグの直前に置いてください。

    ```astro ins={1}
        <Footer />
      </body>
    </html>
    ```

3. ブラウザのプレビューで、各ページに新しくフッターのテキストが表示されていることを確認してください。
</Steps>

<Box icon="puzzle-piece">

## やってみよう - フッターをカスタマイズする

複数のソーシャルネットワーク（Instagram、Twitter、LinkedInなど）を表示し、またユーザー名を追加して自分のプロフィールに直接リンクするようにフッターをカスタマイズしてください。

</Box>

### コードの確認

ここまでチュートリアルの各ステップに従ってきた場合、`index.astro`ファイルは以下のようになっているはずです。

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'ホームページ';
---

<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
    <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>
```

## ソーシャルメディアコンポーネントを作成する

リンクしたいオンラインアカウントが複数ある場合のために、再利用可能なコンポーネントを1つ作成し、それを何度も表示するようにしましょう。これを使う際、オンラインプラットフォームとユーザー名という2つのプロパティ（`props`）を渡します。

<Steps>
1. `src/components/Social.astro`に新しいファイルを作成します。

2. 新しいファイル`Social.astro`に以下のコードをコピーします。

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```
</Steps>

### `Social.astro`をフッターにインポートして使用する

<Steps>
1. 上の新しいコンポーネントをインポートして3回使用するように、`src/components/Footer.astro`のコードを変更します。その際、毎回異なる**コンポーネント属性**をpropsとして渡します。

    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>私のプロジェクトについて詳しくは<a href={`https://www.${platform}.com/${username}`}>{platform}</a>をご確認ください！</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. ブラウザのプレビューを確認してください。3つのプラットフォームへのリンクを含んだ新しいフッターが各ページに表示されているはずです。
</Steps>

## ソーシャルメディアコンポーネントにスタイルを適用する

<Steps>
1. `<style>`タグを`src/components/Social.astro`に追加して、リンクの外観をカスタマイズします。

    ```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. `src/components/Footer.astro`に`<style>`タグを追加して、コンテンツのレイアウトを改善します。

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

3. ブラウザのプレビューを再度開き、各ページに新しいフッターが表示されていることを確認します。
</Steps>

<Box icon="question-mark">

### 確認テスト

1. `title`、`author`、`date`の各値をpropsとして受け取るために、Astroコンポーネントのフロントマターに書く必要があるコードはどれですか？

    <MultipleChoice>
      <Option isCorrect>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option>
        `<BlogPost title="私の最初の投稿" author="Dan" date="2022年8月12日" />`
      </Option>
    </MultipleChoice>
    

2. Astroコンポーネントに**値をpropsとして渡す**にはどうすればよいですか？
    <MultipleChoice>
      <Option>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option isCorrect>
        `<BlogPost title="私の最初の投稿" author="Dan" date="2022年8月12日" />`
      </Option>
    </MultipleChoice>
</Box>



<Box icon="check-list">

## チェックリスト

<Checklist>
- [ ] `src/components/`に新しい`.astro`コンポーネントを作成できる。
- [ ] Astroコンポーネント内で他のAstroコンポーネントをインポートして使用できる。
- [ ] Astroコンポーネントにpropsを渡せる。
</Checklist>
</Box>

### Resources

- [Astroにおけるコンポーネントprops](/ja/basics/astro-components/#コンポーネントのprops)
